import { Descriptions, Section } from '@/components';
import styles from './index.module.scss';
import { useRequest } from '@/hooks';
import { getApiChoiceOutGet, GetApiDressListResponse } from '@/api';
import { useEffect, type FC } from 'react';
import { DressType } from '../../constants';

interface BaseInfoProps {
  data: GetApiDressListResponse[0];
}

const ProductInfo: FC<BaseInfoProps> = ({ data }) => {
  // 要根据类型去请求表单字段
  useEffect(() => {
    if (data?.dressType) {
      fetchDressType({ airyType: DressType[data.dressType] });
    }
  }, [data?.dressType]);

  // 根据类型获取表单配置
  const { data: fields = [], run: fetchDressType } = useRequest(getApiChoiceOutGet, {
    manual: true,

    formatResult: (res) => {
      return res?.data?.map((item) => ({
        label: item.filed,
        field: item.key,
      }));
    },
  });

  return (
    <Section title="产品信息" className={styles.container}>
      <Descriptions
        options={[
          { label: '编号', field: 'dressNo', col: 2 },
          ...fields,
        ]}
        data={data}
      />
    </Section>
  );
};

export default ProductInfo;
